<template>
	<view class="page_main page_render" :class="{ can_show: render_req }">
		<pagelogin ref="pagelogin" @loginready="pagerefresh" @initcallback="com_pagelogin_initcallback($event)" need_login="0">
			<!-- hasHeight :navstyle="{ background: '#1F1F1F' }" -->
			<diynav ref="diynav" :navstyle="{ background: '#383950' }" isFixed isdiy hasHeight @settop="set_pagetop($event)">
				<template slot="diy">
					<view class="index_message">
						<view class="left_view">
							<view class="index_view" @click="bluetooth_connect_menu(1)">
								<image
									class="view_icon"
									:src="BLUETOOTH_DEVICE_CONFIG.bluetooth_connect ? '/static/images/index_bluetool.png' : '/static/images/index_bluetool_no.png'"
								></image>
								<text class="tt">
									{{ BLUETOOTH_DEVICE_CONFIG.bluetooth_connect ? '已连接' : '未连接' }}
								</text>
							</view>
							<view class="index_view" @click="bluetooth_connect_menu(0)">
								<image class="view_icon" src="/static/images/index_scan.png"></image>
							</view>
						</view>
						<view class="title" @click="opensetting()">
							{{ COMMON_VAR.website }}
						</view>
						<view class="right_view"></view>
					</view>
				</template>
			</diynav>
			<myScrollView :y_on="true" :height="`${change_var.win_height - change_var.page_top}`">
				<judgeTips @trigger_connect_judge="bluetooth_connect_menu()"></judgeTips>

				<view class="page_content page_card_p">
					<block v-for="(_view, index) in PAGE_VIEW" :key="index">
						<view class="page_card" :class="_view.view_class">
							<block v-if="_view.view_type == 'battery_info'">
								<!-- 首页电池数据 -->
								<view class="battery">
									<image class="battery_img" :src="battery_judge(BLUETOOTH_INIT_FORM.dev_soc)"></image>
									<view class="text">
										<block v-if="BLUETOOTH_INIT_FORM.dev_current > 0 && objJudge(BLUETOOTH_INIT_FORM.index_full_time)">
											<image class="index_full" src="/static/images/index_full.png"></image>
											<text class="t1">充电中</text>
										</block>
										<block v-else>
											<text class="t1">SOC</text>
										</block>
										<text class="t2">{{ BLUETOOTH_INIT_FORM.dev_soc }}%</text>
									</view>
								</view>
								<view class="battery_info">
									<view class="info_view" v-for="(_vv, _ii) in _view.view_list" :key="_ii">
										<text class="label">{{ _vv.view_tt }}</text>
										<text class="value">{{ back_key(_vv) }}</text>
									</view>
									<block v-if="BLUETOOTH_INIT_FORM.dev_current > 0 && objJudge(BLUETOOTH_INIT_FORM.index_full_time)">
										<!-- 充电 放空 -->
										<view class="info_view">
											<text class="label">预计充满时间</text>
											<text class="value">
												{{ BLUETOOTH_INIT_FORM.index_full_time }}
											</text>
										</view>
									</block>
									<block v-else-if="BLUETOOTH_INIT_FORM.dev_current < 0 && objJudge(BLUETOOTH_INIT_FORM.index_empty_time)">
										<!-- 放电 -->
										<view class="info_view">
											<text class="label">预计放空时间</text>
											<text class="value">
												{{ BLUETOOTH_INIT_FORM.index_empty_time }}
											</text>
										</view>
									</block>
								</view>
							</block>
							<block v-else>
								<view class="card_tt" v-if="judge_tt_show(_view)">
									{{ _view.line_tt }}
								</view>

								<view class="card">
									<block v-if="_view.view_type == 'switch_list'">
										<view class="switch_list">
											<view
												class="switch_view"
												v-for="(_vv, _ii) in _view.view_list"
												:key="_ii"
												:class="{
													on: back_switch(_vv, 'number') == 1,
												}"
											>
												<view class="switch_view_top">
													<view class="view"></view>
													<text class="t1">
														{{ back_switch(_vv, 'tt') }}
													</text>
												</view>
												<text class="t2">
													{{ back_switch(_vv, 'view_tt') }}
												</text>
											</view>
										</view>
									</block>

									<block v-else-if="_view.view_type == 'info_list'">
										<view class="info_list">
											<block v-for="(_vv, _ii) in _view.view_list" :key="_ii">
												<view class="info_view" v-if="roleJudge(_vv)">
													<image class="info_view_img" :src="_vv.icon"></image>
													<view class="info_view_top">
														<view class="t1">
															{{ _vv.view_tt }}
														</view>
														<view class="t2">
															{{ back_key(_vv) }}
														</view>
													</view>
												</view>
											</block>
										</view>
									</block>

									<block v-else-if="_view.view_type == 'index_temperature'">
										<view class="heat_view" v-if="objJudge(BLUETOOTH_INIT_FORM.index_temperature_show)">
											<view class="heat_view_bg">
												<image class="img" src="/static/images/heat_view.png"></image>
											</view>

											<view class="heat_list">
												<view class="heat_item" v-for="(_vv, _ii) in BLUETOOTH_INIT_FORM.index_temperature_show" :key="_ii">
													<view class="t1">
														{{ _vv.title }}
													</view>
													<view class="t2">
														{{ _vv.value }}
													</view>
												</view>
											</view>
										</view>
										<view class="empty" v-else-if="!objJudge(BLUETOOTH_DEVICE_CONFIG.bluetooth_connect)">
											<view class="empty_btn" @click="bluetooth_connect_menu()">连接设备</view>
										</view>
									</block>

									<block v-else-if="_view.view_type == 'warning_list'">
										<!-- 报警信息 -->
										<view class="warning_list" v-if="objJudge(BLUETOOTH_INIT_FORM.index_alarm_status_show)">
											<view class="warning_view" v-for="(_vv, _ii) in BLUETOOTH_INIT_FORM.index_alarm_status_show" :key="_ii">
												<view class="warning_view_left com_yuan">
													<view class="tt">
														{{ _vv.view_tt }}
													</view>
												</view>

												<view class="warning_view_r">
													{{ _vv.time }}
												</view>
											</view>
										</view>

										<view class="empty" v-else-if="!objJudge(BLUETOOTH_DEVICE_CONFIG.bluetooth_connect)">
											<view class="empty_btn" @click="bluetooth_connect_menu()">连接设备</view>
										</view>
									</block>

									<block v-else-if="_view.view_type == 'index_voltage_chart' && roleJudge(_view)">
										<!-- 电压图表 -->
										<view class="ride_chart" v-if="objJudge(BLUETOOTH_INIT_FORM.index_voltage_chart)">
											<view
												class="chart_con"
												:style="{
													'--line_height': `${BLUETOOTH_INIT_FORM.dev_bunch * 46}rpx`,
												}"
											>
												<view class="chart_top">
													<scroll-view class="chart_scroll" :scroll-y="true">
														<view class="right_list">
															<view
																class="scroll_view"
																:class="{
																	max: _ii == BLUETOOTH_INIT_FORM.index_voltage_chart_config.max_index,
																	min: _ii == BLUETOOTH_INIT_FORM.index_voltage_chart_config.min_index,
																}"
																v-for="(_vv, _ii) in BLUETOOTH_INIT_FORM.index_voltage_chart"
																:key="_ii"
															>
																<view class="nn">第{{ _ii + 1 }}串</view>
																<view class="yz">
																	<view
																		class="bg"
																		:style="{
																			width: `${back_width(_vv)}%`,
																		}"
																	>
																		{{ _vv }}
																	</view>
																</view>
															</view>
														</view>
													</scroll-view>
												</view>

												<view class="chart_bot">
													<view class="view" v-for="(_vv, _ii) in 5" :key="_ii"></view>
												</view>
											</view>
										</view>

										<view class="empty" v-else-if="!objJudge(BLUETOOTH_DEVICE_CONFIG.bluetooth_connect)">
											<view class="empty_btn" @click="bluetooth_connect_menu()">连接设备</view>
										</view>
									</block>
								</view>
							</block>
						</view>
					</block>

					<!-- <input type="range" name="sampleRate" min="8000" max="48000" step="1000" /> -->
				</view>
			</myScrollView>

			<mypopup :on="pagepopup" :popup_type="-1" ani_position="center" ani_type="scale_ani" :popup_config="popup_config" @mask_click="hidepopup()">
				<view class="adf_popup">
					<view class="adf_popup_content">
						<myswiper
							:LIST="adf_list"
							circular
							autoplay
							:interval="4000"
							:duration="800"
							width="570"
							height="698"
							radius="20"
							imgClickMode="emit"
							@imgClick="swiper_click($event)"
						></myswiper>
					</view>
					<view class="adf_popup_close" @click="hidepopup()">
						<myimg imgsrc="/static/images/com_close_white.png" width="34"></myimg>
					</view>
				</view>
			</mypopup>

			<bluetoothPopup ref="bluetoothPopup" @connect_callback="bluetooth_connect_callback()"></bluetoothPopup>
		</pagelogin>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
// import { Employee } from '@/util/js/PERSON/PERSON';
export default {
	mixins: [storeMixin],
	data() {
		return {
			change_var: {},

			scrollTop: 0,
			render_component_init: false,
			page_render: false,
			page_title: '',
			render_req: false,
			nextreq: true,
			page_id: 0,
			page_form: {},

			page_data: {},
			page_list: [],
			loadingstatus: 0,

			PAGE_VIEW_KEY: 'PAGE_INDEX',
			PAGE_VIEW: [],

			READ_COMMAND_TASK: [
				{
					command_group_code: 0x03,
					done: false,
					type: '基本信息及状态',
				},
				{
					command_group_id: 0xaa,
					command_group_code: 0xf8,
					done: false,
					type: '蓝牙名称',
				},
				// {
				// 	command_group_id: 0xaa,
				// 	command_group_code: 0xf9,
				// 	done: false,
				// 	type: 'mac地址指令',
				// },
				{
					command_group_code: 0xfa,
					done: false,
					type: '自定义读参数_0-55',
					buffer: [0, 0, 56],
				},
				{
					command_group_code: 0xfa,
					done: false,
					type: '自定义读参数_56-103',
					buffer: [0, 56, 48],
				},
				{
					command_group_code: 0xfa,
					done: false,
					type: '自定义读参数_104-122',
					buffer: [0, 104, 54],
				},
				{
					command_group_code: 0xfa,
					done: false,
					type: '自定义读参数_158-183',
					buffer: [0, 158, 26],
					hideLoading: true,
				},
				{
					command_group_code: 0xf6,
					done: false,
					type: '电池内阻30串',
				},
				{
					command_group_code: 0x00,
					done: false,
					type: '芯片类型（二级过流保护下级list用到）',
				},
				{
					command_group_code: 0xaa,
					done: false,
					type: '保护统计次数',
				},
				{
					command_group_code: 0x04,
					done: false,
					type: '对应电池的电压集合',
				},
				{
					command_group_code: 0x0a,
					done: false,
					type: '默认充电模式',
					buffer: [0x11],
				},
			],
			// update_api_time: 60000, // 60000 一分钟上传一次设备信息
			update_api_time: 10000, // 60000 一分钟上传一次设备信息
			update_api_task: null,
			// jojo
			READ_RECURRING_TASK_TIME: 5000, // 5000 所有指令发送后，重新开始的时间

			pagepopup: false,
			popup_config: {},

			adf_list: [],
		};
	},
	created() {},
	onLoad() {
		this.init_pagedata();
		this.INIT_WEBSOCKET_CONNECT();
		this.INIT_BLUETOOTH_RESET_FORM();
	},
	onShow() {
		this.com_onshow_fun();
	},
	onHide() {
		this.com_page_hide(this);
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onPullDownRefresh() {
		this.pagerefresh(1);
	},
	onShareAppMessage(res) {},
	onShareTimeline(res) {},
	methods: {
		opensetting() {
			uni.openAppAuthorizeSetting();
		},
		//页面刷新
		pagerefresh(type = 0) {
			let _this = this;
			_this.startPulldownJudge(type);
			_this.com_page_show(_this);
			_this.page_bluetooth_init();
			_this.INIT_PAGE_COMMADN_VIEW(_this.PAGE_VIEW_KEY);
			_this.com_loading_fun({ mode: 0 });
			// _this.START_TEST_COMMADN();

			// let a = [];
			// a.push(_this.INIT_PERSON());
			// console.log(a);

			// setTimeout(() => {
			// 	_this.INIT_PERSON().calculateBonus();
			// }, 1000);
		},
		async init_adf() {
			let _this = this;
			let { state = 0, data = [] } = await _this.com_getdata({
				url: '/banner/list',
				data_handle_on: false,
				method: 'GET',
				data: {
					pos: 'BMS小程序首页',
				},
			});
			if (state == 1) {
				_this.adf_list = data;
			} else {
				_this.adf_list = [];
			}
		},
		swiper_click() {
			let _this = this;
			_this.hidepopup();
			let page_binding_list = uni.getStorageSync('page_binding_list') || [];
			let READY_DEVICE = uni.getStorageSync('READY_DEVICE') || {};
			// console.log(page_binding_list);
			// console.log(READY_DEVICE);
			let FIRST = page_binding_list.find(item => {
				return item.bike_battery_id == READY_DEVICE.res_mac;
			});
			_this.goweburl_f(`/pagesD/shop/user_warranty?dev_id=${FIRST.id}`);
			// console.log(FIRST);
		},

		openpopup(v) {
			this.$nextTick(() => {
				this.pagepopup = true;
			});
		},
		hidepopup() {
			this.pagepopup = false;
		},
		page_bluetooth_init() {
			let _this = this;
			_this.bluetooth_init_judge({ click_trigger: false }, () => {
				let { bluetooth_connect, bluetooth_deviceId } = _this.BLUETOOTH_DEVICE_CONFIG;
				// console.log(_this.BLUETOOTH_DEVICE_CONFIG);
				// 把已连接的设备添加到设备列表中
				if (bluetooth_connect) {
					_this.writeInstruct_init();
				} else if (bluetooth_deviceId) {
					_this.judge_has_connect({ task: false });
				}
			});
		},
		// 蓝牙列表组件连接成功回调
		bluetooth_connect_callback() {
			let _this = this;
			setTimeout(() => {
				_this.com_onshow_fun();
			}, 500);
		},

		// 连接成功回调
		connect_callback() {
			let _this = this;
			setTimeout(() => {
				_this.com_onshow_fun();
			}, 500);
		},
		READ_COMMAND_TASK_DONE() {
			let _this = this;
			_this.com_loading_fun({ mode: 0 });
			_this.com_getonce(function () {
				_this.judge_frist_binding();
				console.log('READ_COMMAND_TASK_DONE');
			});
		},
		async judge_frist_binding() {
			let _this = this;
			let f = uni.getStorageSync('FRIST_BINDING') || false;
			if (!f) return;
			await _this.init_adf();
			if (_this.objJudge(_this.adf_list)) {
				uni.setStorageSync('FRIST_BINDING', false);
				_this.openpopup();
			}
		},
		// 响应当前指令已完成
		READ_COMMAND_TASK_RESPONSE() {
			let _this = this;
			if (!_this.judge_bluetooth()) return;
			if (_this.READ_COMMAND_TASK_INDEX == _this.READ_COMMAND_TASK.length - 1) {
				_this.$nextTick(() => {
					// 走完一遍指令
					_this.check_update_api_data();
					// 设置刷新时间
					let _refresh = _this.happenTimeFun(new Date().getTime(), 'y-m-d h:i:s');
					_this.store_set_state_config({ state_name: 'BLUETOOTH_INIT_FORM', data: { index_data_refresh_time: _refresh } });
				});
			}
			_this.writeInstruct_task();
		},

		// 上传设备信息到接口
		check_update_api_data(mode = 'auto') {
			let _this = this;
			if (!_this.judge_bluetooth()) return;
			let api_list = [
				{
					//基础信息
					type: 'info',
					url: '/bms/info',
					parameter: [
						'dev_id',
						'bluetooth_device_name',
						'BatteryVoltage',
						'BatteryCapacity',
						'dev_voltage',
						'dev_current',
						'dev_capacity',
						'dev_soc',
						'dev_circulate',
						'dev_bunch',
						'dev_preserve',
						'dev_restart',
						'dev_ntc',
						'dev_temp',
						'dev_humidity',
						'dev_lng',
						'dev_lat',
					],
				},
				{
					//电池串数详情
					type: 'info',
					url: '/bms/voltage',
					parameter: ['dev_id', 'dev_bunch', 'dev_max', 'dev_min', 'dev_avg', 'dev_diff', 'bunch'],
				},
			];
			if (_this.objJudge(_this.update_api_task)) return;
			_this.update_api_task = setTimeout(async () => {
				let location = await _this.com_getLocation();
				if (location) {
					let { lng, lat } = location;
					// _this.BLUETOOTH_INIT_FORM.dev_lng = lng;
					// _this.BLUETOOTH_INIT_FORM.dev_lat = lat;
					_this.store_set_state_config({ state_name: 'BLUETOOTH_INIT_FORM', data: { dev_lng: lng, dev_lat: lat } });
				}
				console.log('定时传输数据到后台-check_update_api_data-------start');
				api_list.forEach(config => {
					let data = {};
					let url = config.url;
					config.parameter.forEach(_vv => {
						if (_vv == 'bunch') {
							// 电池信息上传
							let _bunch_list = _this.deepclone(_this.BLUETOOTH_INIT_FORM['index_voltage_chart']);
							while (_bunch_list.length < 22) {
								_bunch_list.push(0);
							}
							_this.$set(data, _vv, _bunch_list.join(','));
						} else {
							_this.$set(data, _vv, _this.BLUETOOTH_INIT_FORM[_vv]);
						}
					});

					// 可能设备会有断开连接 刚好上传任务又开始了的情况
					// console.log(`${_this.__route__}--${_this.page_canshow}`)

					if (!_this.judge_bluetooth()) return;
					_this.com_getdata({
						url,
						data,
						data_fun: function (v) {
							console.log(v, data, `传输给后台-${url}成功`);
						},
					});
				});
				_this.update_api_task = null;
			}, _this.update_api_time);
			//
		},
		judge_tt_show(vv) {
			let _this = this;
			let show = false;

			if (vv.line_tt) {
				show = true;
			}

			if (_this.BLUETOOTH_DEVICE_CONFIG.bluetooth_connect) {
				if (vv.view_type == 'index_voltage_chart') {
					show = _this.objJudge(_this.BLUETOOTH_INIT_FORM.index_voltage_chart);
				}

				if (vv.view_type == 'warning_list') {
					show = _this.objJudge(_this.BLUETOOTH_INIT_FORM.index_alarm_status_show);
				}
			}

			if (vv.view_type == 'index_voltage_chart') {
				show = _this.roleJudge(vv);
			}

			return show;
		},

		// 返回电压串数 宽度比例
		back_width(vv) {
			let d = this.BLUETOOTH_INIT_FORM.index_voltage_chart_config.diff; // 7
			let my_d = vv - this.BLUETOOTH_INIT_FORM.index_voltage_chart_config.min; // 5
			let min_b = 85; // 最小值自定义
			let n = this.back_number(min_b + (my_d / d) * (100 - min_b));
			return n;
		},
		back_switch(vv, type) {
			let _this = this;
			let _key = vv.form_key;

			let _number, tt, view_tt;

			_number = _this.BLUETOOTH_INIT_FORM[_key];
			tt = _this.BLUETOOTH_INIT_FORM[_key] == 1 ? '开' : '关';
			view_tt = vv.view_tt;

			// if (_key == 'index_protection_status') {
			// 	if (_this.objJudge(_this.BLUETOOTH_INIT_FORM['index_protection_status_list'])) {
			// 		_number = 1;
			// 		tt = '开';
			// 		view_tt = _this.BLUETOOTH_INIT_FORM['index_protection_status_list'][0];
			// 	} else {
			// 		_number = 0;
			// 		tt = '关';
			// 		view_tt = '保护状态';
			// 	}
			// }

			if (type == 'number') {
				return _number;
			} else if (type == 'tt') {
				return tt;
			} else if (type == 'view_tt') {
				return view_tt;
			}
		},
		back_key(vv) {
			let b = this.BLUETOOTH_INIT_FORM[vv.form_key];

			if (this.gettype(b) == 'Number') {
				let _decimal = 0;
				if (this.objJudge(vv.accuracy)) {
					b = b * vv.accuracy;
					// b = b;
				}
				if (this.objJudge(vv.decimal)) {
					_decimal = vv.decimal;
					let is_normal_user = uni.getStorageSync('is_normal_user');
					if (is_normal_user && this.objJudge(vv.decimal_user)) {
						_decimal = vv.decimal_user;
					}
				}
				b = b.toFixed(_decimal);
			}

			if (this.objJudge(vv.unit)) {
				b += vv.unit;
			}
			return b;
		},
		// 电池电量图
		battery_judge(n) {
			let _a = [
				{
					value: 0,
					src: 'https://file.qijiniu.com/files/bms/battery_0.png',
				},
				{
					value: 1,
					src: 'https://file.qijiniu.com/files/bms/battery_20.png',
				},
				{
					value: 21,
					src: 'https://file.qijiniu.com/files/bms/battery_40.png',
				},
				{
					value: 41,
					src: 'https://file.qijiniu.com/files/bms/battery_60.png',
				},
				{
					value: 61,
					src: 'https://file.qijiniu.com/files/bms/battery_80.png',
				},
				{
					value: 81,
					src: 'https://file.qijiniu.com/files/bms/battery_100.png',
				},
			];
			let b = 'https://file.qijiniu.com/files/bms/battery_0.png';

			_a.forEach(v => {
				if (n > v.value) {
					b = v.src;
				}
			});
			return b;
		},
	},

	watch: {},
};
</script>

<style lang="scss">
.page_content {
}

.battery_show {
	padding: 50rpx 0;
	display: flex;
	align-items: center;

	.battery {
		position: relative;
		width: 186rpx;
		height: 330rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		margin: 10rpx 72rpx 0;

		flex-shrink: 0;

		.battery_img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
		}

		.text {
			position: relative;
			z-index: 3;

			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.index_full {
			width: 75rpx;
			height: 75rpx;
		}

		.t1 {
			font-size: 32rpx;
			color: #ffffff;
		}

		.t2 {
			font-size: 42rpx;
			color: #ffffff;
		}
	}

	.battery_info {
		width: 100%;
		padding-left: 20rpx;

		.info_view {
			display: flex;
			flex-direction: column;

			.label {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}

			.value {
				margin-top: 4rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #ffffff;
			}

			& + .info_view {
				margin-top: 16rpx;
			}
		}
	}
}

.switch_list {
	display: flex;

	.switch_view {
		height: 180rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;

		font-size: 24rpx;
		font-weight: 400;
		color: #ffffff;
		padding: 48rpx 10rpx 0rpx;
		text-align: center;
		&.on {
			.switch_view_top {
				.view {
					background-color: #1fd5ca;
				}
			}
		}

		.switch_view_top {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			.view {
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				margin-right: 6rpx;
				background-color: #9395a2;
			}
		}
	}
}

.info_list {
	display: flex;
	padding: 20rpx 0 40rpx;
	flex-wrap: wrap;

	.info_view {
		width: calc(100% / 3);

		display: flex;
		align-items: center;
		// justify-content: center;
		padding: 0 12rpx;

		&:nth-child(n + 4) {
			margin-top: 58rpx;
		}

		.info_view_img {
			width: 82rpx;
			height: 82rpx;
			margin-right: 10rpx;
			flex-shrink: 0;
		}

		.info_view_top {
			padding-top: 10rpx;

			.t1 {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}

			.t2 {
				margin-top: 4rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #ffffff;
			}
		}
	}
}

.heat_view {
	display: flex;
	align-items: center;
	padding: 46rpx 0 46rpx 78rpx;

	.heat_view_bg {
		width: 162rpx;
		height: 238rpx;
		margin-right: 70rpx;
	}

	.heat_list {
		.heat_item {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #ffffff;

			& + .heat_item {
				margin-top: 10rpx;
			}

			.t1 {
				min-width: 80rpx;
				flex-shrink: 0;
			}

			.t2 {
				flex: 1;
				text-align: right;
				margin-left: 10rpx;
				color: var(--color1);
			}
		}
	}

	.info_view {
		width: calc(100% / 3);

		display: flex;
		align-items: center;
		justify-content: center;

		&:nth-child(n + 4) {
			margin-top: 58rpx;
		}

		.info_view_img {
			width: 82rpx;
			height: 82rpx;
			margin-right: 10rpx;
		}

		.info_view_top {
			padding-top: 10rpx;

			.t1 {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}

			.t2 {
				margin-top: 4rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #ffffff;
			}
		}
	}
}

.warning_list {
	padding: 20rpx 20rpx 35rpx 46rpx;

	.warning_view {
		display: flex;
		align-items: center;
		justify-content: space-between;

		& + .warning_view {
			margin-top: 20rpx;
		}

		.warning_view_left {
			.tt {
				font-size: 28rpx;
				font-weight: 400;
				color: #ffffff;
			}
		}

		.warning_view_r {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
		}
	}
}

.ride_chart {
	overflow: hidden;
	// margin: 36rpx 4rpx 0 30rpx;
	padding: 18rpx 0 28rpx;

	.top_tt {
		font-size: 18rpx;
		font-weight: 400;
		color: #a6aab3;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.chart_con {
		--line_height: 516rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		overflow: hidden;
		padding: 0 16rpx;

		.chart_top {
			position: relative;
			z-index: 6;
			// width: var(--line_width);

			width: 100%;

			.chart_scroll {
				// width: var(--line_width);
				// height: 100%;
				height: var(--line_height);

				.right_list {
					// display: flex;
					// align-items: flex-end;
					// height: 432rpx;

					.scroll_view {
						// padding: 0 16rpx;
						// height: 360rpx;
						display: flex;
						align-items: center;
						padding: 10rpx 0;

						// flex-direction: column;
						// justify-content: flex-end;
						// align-items: center;
						// position: relative;
						// top: 6rpx;
						--bg: #1fd1c2;

						&.max {
							--bg: #ff5656;
						}

						&.min {
							--bg: #1fa6d1;
						}

						.nn {
							flex-shrink: 0;
							width: 90rpx;
							padding-right: 14rpx;
							display: flex;
							justify-content: flex-end;
							font-size: 20rpx;
							color: #ffffff;
							line-height: 1;
						}

						.yz {
							width: calc(100% - 90rpx);
						}

						.bg {
							width: 200rpx;
							height: 26rpx;
							background: var(--bg);
							border-radius: 0 18rpx 18rpx 0;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							padding: 0 8rpx;

							font-size: 20rpx;
							font-weight: 400;
							color: #ffffff;
							transition: all 0.3s;
						}
					}
				}
			}
		}

		.chart_bot {
			// width: 568rpx;
			width: 100%;
			position: relative;
			z-index: 5;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			// padding-left: 80rpx;

			.view {
				width: calc((100% - 90rpx) / 5);
				position: relative;
				// height: 72rpx;
				font-size: 24rpx;
				color: #a6aab3;
				display: flex;
				align-items: center;
				justify-content: center;

				&:first-child {
					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						transform: translate(50%, -100%);
						// width: var(--line_width);
						height: var(--line_height);
						width: 1rpx;
						background-color: #707070;
					}
				}

				&::after {
					content: '';
					position: absolute;
					right: 0;
					top: 0;
					transform: translate(50%, -100%);
					// width: var(--line_width);
					height: var(--line_height);
					width: 1rpx;
					background-color: #707070;
				}
			}
		}
	}

	.bot_tt {
		margin-top: 10rpx;
		font-size: 18rpx;
		font-weight: 400;
		color: #a6aab3;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}

.adf_popup {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.adf_popup_content {
	position: relative;
}
.adf_popup_close {
	padding: 10rpx;
	border: 2rpx solid #ffffff;
	border-radius: 50%;
	margin-top: 20rpx;
}
</style>
